<template>
  <div>
    
    <!-- 搜索框 -->
    <van-search
      @focus="$router.push('/search')"
      v-model="value"
      placeholder="同学们,学习使你更快乐"
    />
    <div >
         <!-- 轮播图 -->
      <van-swipe :autoplay="3000">
        <van-swipe-item v-for="(image, index) in lunboImgList" :key="index">
          <img v-lazy="image" />
        </van-swipe-item>
      </van-swipe>
      <!-- 课程 题库 我的 -->
      <van-grid column-num="3">
        <van-grid-item text="课程" to="/showmore">
          <template slot="icon">
            <img src="../../assets/images/nav-course-icon.png" alt="" />
          </template>
        </van-grid-item>
        <van-grid-item text="题库" to="/homework">
          <template class="tuijianicon" slot="icon">
            <img src="../../assets/images/questionIcon.png" alt="" />
          </template>
        </van-grid-item>
        <van-grid-item text="我的" to="/my">
          <template slot="icon">
            <img src="../../assets/images/nav-member-icon.png" alt="" />
          </template>
        </van-grid-item>
      </van-grid>
      <!-- 推荐课程 -->
      <van-cell title="推荐课程" is-link to="/showmore" />
      <!-- 商品卡片 -->        
      <van-card
        v-for="(item, index) in this.indexList[4].content.list"
        :key="index"
        @click="
          $router.push({
            path: '/showmoreVideo',
            query: {
              cid: item.cid,
            },
          })
        "
        :price="item.study_count + '个人学习'"
        :thumb="'http://video.zjsxjy.com' + item.banner"
      >
        <template class="price_corse" slot="num">
          {{ item.price + 0 ? '免费' : item.price + 0 }}
        </template>
        <template class="flexcard" slot="title">
       <div class="flex">   <img
            class="nav-icon"
            v-if="(item.goods_type === 1)"
            src="../../assets/images/audio-play.png"
            alt=""
          />
          <img
            class="nav-icon"
            v-else-if="(item.goods_type === 2)"
            src="../../assets/images/audio-icon.png"
            alt=""
          />
          <span>{{ item.title }}</span></div>
        </template>
      </van-card>
      <!-- 热门套餐 -->
      <van-cell title="热门套餐" is-link to="/bundlelist" />
      <!-- 热门内容  -->
      <van-swipe class="remen"  :loop="false" :width="275">
        <van-swipe-item
          v-for="(item, index) in this.indexList[3].content.list"
          :key="index"
          class="bottom-swipe"
        >
          <img :src="'http://video.zjsxjy.com' + item.banner" alt="" />
          <van-cell-group>
            <van-cell
              :title="item.title"
              :value="item.price"
              :label="'包含' + item.courseNumbers + '门课程'"
            />
          </van-cell-group>
        </van-swipe-item>
      </van-swipe>
    </div>
  </div>
</template>

<script>
import { getIndex } from '@/api'

export default {
  data() {
    return {
      value: '',
      //轮播图
      lunboImgList: null,
      //首页数据都存在这里
      indexList: null,
    }
  },
  methods: {
    async getIndex1() {
      try {
        const { data: res } = await getIndex()
        // console.log(res)
        this.indexList = res.data.list
        console.log(this.indexList, '首页数据')
        //首页轮播图
        var imglist = res.data.list[1].content.list
        this.lunboImgList = imglist.map((item) => {
          return 'http://video.zjsxjy.com' + item.img
        })
      } catch (err) {
        console.log(err)
      }
    },
  },
  created() {
    this.getIndex1()
    //请求首页
  },
}
</script>
<style lang="scss" scoped>
.van-swipe img {
  width: 375px;
  height: 210px;
}
.van-grid-item img {
  width: 42px;
}
.van-card .nav-icon {
  width: 16px;
  height: 16px;
  margin-right: 5px;
  overflow: hidden;
  vertical-align: middle;
}

div.van-card__bottom span.van-card__price-currency {
  display: none;
}
.tegervan-card__price-in {
  font-size: 16px;
  color: #c0c4cc;
}
.custom-indicator {
  position: absolute;
  right: 5px;
  bottom: 5px;
  padding: 2px 5px;
  font-size: 12px;
  background: rgba(0, 0, 0, 0.1);
}
.bottom-swipe {
  height: 375px;
}
//免费  字
div.van-card__bottom > div.van-card__num {
  color: #0486fe;
  font-size: 14px;
}
div.bottom-swipe.van-swipe:last-child {
  margin-bottom: 100px;
}
.bottom-swipe.van-swipe > div.van-swipe__indicators > i {
  display: none;
}
.flexcard {
  display: flex;
}
div.van-swipe__track > div .bottom-swipe {
  margin-right: 100px;
}

.remen img[data-v-655867b8] {
    width: 7rem;
    height: 152px;
}
.van-card__thumb{
  width: 125px;
  height: 84px;
}
.flex{
 height: 20px;line-height: 20px;
}
.contact{
  width: 50px;
  height: 50px;
  position: absolute;
  background-color: red;
  bottom: 100px;
}
</style>
